import { ref } from 'vue'
import { heightWidth } from '@/utils'

export function styleHooks() {
  const style = {
    headerHeightPx: ref(`${heightWidth.headerHeight}px`),
    tagsHeightPx: ref(`${heightWidth.tagsHeight}px`),
    asideWidthPx: ref(`${heightWidth.asideWidth}px`),
    asideWidthSmallPx: ref(`${heightWidth.asideWidthSmall}px`),
    contentTopPx: ref(`${heightWidth.contentTop}px`),
    contentRightPx: ref(`${heightWidth.contentRight}px`),
    contentBottomPx: ref(`${heightWidth.contentBottom}px`),
    contentLeftPx: ref(`${heightWidth.contentLeft}px`)
  }

  return { ...style }
}
